<template>
  <div class="stationInfo-page">
    <div class="tabs-container">
      <a-tabs v-model:activeKey="state.tabActive">
        <a-tab-pane key="2" tab="短信回执记录">
          <a-table
            :columns="state.tableColumns1"
            :data-source="state.dataSource1"
            :pagination="false"
            size="small"
            bordered
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'errorCode'">
                <span class="redText wptnSpan" v-if="record.errorCode == 'DELIVRD'"> 成功 </span>
                <span class="blueText wptnSpan" v-if="record.errorCode != 'DELIVRD'"> 失败 </span>
              </template>
              <template v-else-if="column.dataIndex === 'content'">
                <a-tooltip placement="topLeft" :title="record.content">
                  <span class="content-text">{{ truncateText(record.content, 20) }}</span>
                </a-tooltip>
              </template>
            </template>
          </a-table>
        </a-tab-pane>
        <a-tab-pane key="1" tab="电话语音回执记录">
          <a-table
            :columns="state.tableColumns2"
            :data-source="state.dataSource2"
            :pagination="false"
            size="small"
            bordered
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.dataIndex === 'call_result'">
                <span class="redText wptnSpan" v-if="record.call_result == '1'"> 已接听 </span>
                <span class="blueText wptnSpan" v-if="record.call_result == '0'"> 无法接通 </span>
                <span class="greenText wptnSpan" v-if="record.call_result == '2'"> 未接听 </span>
              </template>
              <template v-else-if="column.dataIndex === 'content'">
                <a-tooltip placement="topLeft" :title="record.content">
                  <span class="content-text">{{ truncateText(record.content, 20) }}</span>
                </a-tooltip>
              </template>
            </template>

          </a-table>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, watch, onMounted } from "vue";
import { Tooltip as ATooltip } from "ant-design-vue";

import {selectFailList,  } from "@/api/alerts/warningSendRecords";

defineOptions({ name: "StationInfo" });

// 文本截取函数
const truncateText = (text: string, maxLength: number) => {
  if (!text) return '';
  if (text.length <= maxLength) return text;
  return text.substring(0, maxLength) + '...';
};

const state = reactive({
  tabActive: "1",
  infoData: null,
  chartOption: null,
  tableColumns1:[
    { dataIndex: "town", title: "镇", align: "center" },
    { dataIndex: "stnm", title: "村", align: "center" },
    { dataIndex: "msg_group", title: "失败编码", align: "center" },
    { dataIndex: "errorCode", title: "发送状态", align: "center" },
    { dataIndex: "mobile", title: "电话号码", align: "center" },
    { dataIndex: "user1", title: "镇联系人", align: "center" },
    { dataIndex: "user2", title: "村联系人", align: "center" },
    { dataIndex: "tm", title: "预警时间", align: "center" },
    { dataIndex: "content", title: "发送内容", align: "center" },
  ],
  tableColumns2:[
    { dataIndex: "town", title: "镇", align: "center" },
    { dataIndex: "stnm", title: "村", align: "center" },
    { dataIndex: "task_id", title: "失败编码", align: "center" },
    { dataIndex: "call_result", title: "发送状态", align: "center" },
    { dataIndex: "called_number", title: "电话号码", align: "center" },
    { dataIndex: "user1", title: "镇联系人", align: "center" },
    { dataIndex: "user2", title: "村联系人", align: "center" },
    { dataIndex: "tm", title: "预警时间", align: "center" },
    { dataIndex: "content", title: "发送内容", align: "center" },
  ],
  dataSource1:[],
  dataSource2:[]
});

const props = defineProps({
  data: { type: Object },
});

const getStationDataInfo = async () => {
  if (props.data) {
    state.infoData = props.data;
    console.log('-----------',state.infoData);
    const logs = await selectFailList(props.data);
    state.dataSource1 = logs.msgList;
    state.dataSource2 = logs.phoneList;
    console.log('-----------logslogslogs',logs);
  }
};

onMounted(async () => {
  state.dataSource1 = [];
  state.dataSource2 = [];
  setTimeout(() => {
    state.tabActive =  props.data.activeTab+"";
    console.log('props.data:::::::::::::',props.data)
    getStationDataInfo();
  }, 1000);
});
</script>

<style lang="less" rel="stylesheet/less" scoped>
.stationInfo-page {
  width: 100%;
  height: 100%;
  min-height: 500px;
  display: flex;
  flex-direction: column;

  .station_info {
    width: 100%;
    margin-bottom: 16px;

    .left_info {
      width: 100%;
      .tableInfo {
        width: 100%;
        tr td {
          border: 1px solid #eee;
          padding: 8px 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        tr td:nth-child(1),
        tr td:nth-child(3) {
          width: 15%;
          background: #fafafa;
          color: #333;
        }
        tr td:nth-child(2),
        tr td:nth-child(4) {
          width: 35%;
          color: #111;
        }
      }
    }
  }

  .tabs-container {
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    :deep(.ant-tabs) {
      flex: 1;
      display: flex;
      flex-direction: column;

      .ant-tabs-content {
        flex: 1;
        overflow: hidden;

        .ant-tabs-tabpane {
          height: 100%;
          overflow: auto;
        }
      }
    }

    // 内容文本样式
    .content-text {
      cursor: help;
      display: inline-block;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
